<template>
	<view class="content">
		<z-paging ref="pagingRef" v-model="dataList" @query="queryList" :fixed="false" :empty-config="{tip: '暂无数据'}">

			<!-- 优派 VIEW_SONIC -->
			<view class="item uni-flex uni-justify-between" v-for="(item, index) in dataList" :key="index"
				@click="itemClick(item)">
				<image class="left_img" referrerpolicy="no-referrer" :src="item.viewSonicResult.baseSmallImg" />
				<view class="uni-flex-item uni-flex uni-column uni-justify-between">
					<view class="title">{{item.viewSonicResult.itemName}}</view>
					<view class="desc">{{item.viewSonicResult.remark}}</view>
					<view class="uni-flex uni-justify-between uni-align-center">
						<view>
							<text class="price1">¥</text>
							<text class="price2">{{item.viewSonicResult.paramMinPrice}}-{{item.viewSonicResult.paramMaxPrice}}</text>
							<text class="text3">/{{item.viewSonicResult.paramPriceUnit}}</text>
						</view>
						<uni-icons type="right" size="12" color="#999999"></uni-icons>
					</view>
				</view>
			</view>

			<template #empty>
				<view>暂无数据</view>
			</template>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from "vue";
	import {
		browseReceiveList
	} from '@/api/browsinghistory.js'
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		getLatitude,
		getLongitude
	} from "@/common/util.js";

	const props = defineProps({
		currentId: Number
	});

	const pagingRef = ref(null);
	const dataList = ref([]);

	// 监听currentId变化或使用onShow
	watch(() => props.currentId, (newVal) => {
		if (newVal === 2) { // 如果是服务页签
			pagingRef.value?.reload();
		}
	});

	// 或者使用onShow（需要确保组件在tab切换时会被销毁重建）
	onShow(() => {
		if (props.currentId === 2) {
			pagingRef.value?.reload();
		}
	});

	const queryList = async (pageNum, pageSize) => {
		try {
			const params = {
				browseType: 2, // 修改为服务对应的类型
				longitude: getLongitude(),
				latitude: getLatitude(),
				pageNum,
				pageSize
			};

			const res = await browseReceiveList(params);

			if (res && res.code === 200) {
				const newData = res.rows || [];
				if (pageNum === 1) {
					dataList.value = newData;
				} else {
					dataList.value = [...dataList.value, ...newData];
				}
				pagingRef.value.complete(newData, res.total <= pageNum * pageSize);
			} else {
				pagingRef.value.complete([], true);
			}
		} catch (error) {
			pagingRef.value.complete(false);
		}
	};
	// 点击项目
	const itemClick = (item) => {
		uni.navigateTo({
			url: "/pages/viewSonic/viewSonicDetail?id=" + item.localId
		});
	};

	// 页面显示时重新加载数据
	onShow(() => {
		// pagingRef.value?.reload();
	});
</script>

<style lang="scss" scoped>
	/* 保持原有样式不变 */
	.content {
		// padding: 20rpx;
		height: calc(100vh - 200rpx);
	}

	.empty-view {
		text-align: center;
		padding: 40rpx;
		color: #999;
		font-size: 28rpx;
	}

	// 优派
	.item {
		background: #ffffff;
		box-shadow: 0px 5rpx 20rpx 0px #e2e8f0;
		border-radius: 20rpx;
		padding: 24rpx 23rpx;
		margin: 26rpx 24rpx 0;

		.left_img {
			width: 203rpx;
			height: 203rpx;
			margin-right: 21rpx;
			/* 新增以下属性 */
			border-radius: 20rpx;
			/* 圆角 */
			// border: 1rpx solid #E2E2E2;
			/* 边框 */
		}

		.title {
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			line-height: 45rpx;
		}

		.desc {
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 33rpx;
			margin-top: 15rpx;
			/* 新增以下属性实现两行省略 */
			display: -webkit-box;
			/* 将对象作为弹性伸缩盒子模型显示 */
			-webkit-box-orient: vertical;
			/* 设置伸缩盒子的子元素排列方式为垂直 */
			-webkit-line-clamp: 2;
			/* 限制显示的行数为2行 */
			overflow: hidden;
			/* 超出部分隐藏 */
			text-overflow: ellipsis;
			/* 文本溢出时显示省略号 */
		}

		.price1 {
			font-size: 20rpx;
			color: #ff6a47;
		}

		.price2 {
			font-size: 32rpx;
			color: #ff6a47;
		}

		.text3 {
			font-weight: 400;
			font-size: 20rpx;
			color: #999999;
			line-height: 28rpx;
		}
	}
</style>